<div class="mt-32 ml-32">
  <div class="max-w-xs leading-6 mb-8 bg-gray-300" id="of-position-top" tiOverflow tiTipPosition="top">{{textContent}}</div>
  <div class="max-w-xs leading-6 mb-8 bg-gray-300" id="of-position-right" tiOverflow tiTipPosition="right">{{textContent}}</div>
  <div class="max-w-xs leading-6 mb-8 bg-gray-300" id="of-position-left" tiOverflow tiTipPosition="left">{{textContent}}</div>
  <div class="max-w-xs leading-6 mb-8 bg-gray-300" id="of-position-bottom" tiOverflow tiTipPosition="bottom">{{textContent}}</div>
  <div class="max-w-xs leading-6 mb-8 bg-gray-300" id="of-position-right1" tiOverflow [maxLine]="2" tiTipPosition="right">
    {{textContent}}
  </div>
</div>
